/**
 * Created by DuHuiling on 2017/4/25.
 */

var InvestDetail = React.createClass({
    getInitialState:function(){
        return{
            ProDetail:this.props.ProDetail
        }
    },
    render:function(){
        return(
            <div className="invest-detail">
                <div className="title-account"><span>项目详情</span>
                    <div className="other">
                        <a href="javascript:void (0)" onclick={this.props.exportPDF.onClick}><i className="iconfont icon-export"></i><p>导出PDF文件</p></a>
                        <a href="javascript:void (0)" onclick={this.props.printBtn.onClick}><i className="iconfont icon-print"></i><p>打印</p></a>
                        <a href={this.props.url.goBack}><i className="iconfont icon-back"></i><p>返回</p></a>
                    </div>
                </div>
                <div>
                    <h1>
                        {this.state.ProDetail.ProjectName}
                        {this.state.ProDetail.ProjectType ?
                            <a className="bg-icon icon icon-zhuang tooltip" data-alt="该项目由绵阳市商业银行提供担保" href="javascript:;"></a> : ""
                        }
                        {this.state.ProDetail.UserCenterOrderStatus ?
                            <span className={"tag " + this.state.ProDetail.UserCenterOrderStatus.className}>{this.state.ProDetail.UserCenterOrderStatus.status}</span> : ""
                        }
                    </h1>
                    {this.state.ProDetail.ProjectMessage ?
                        <div className="failure-tips">
                            <p>
                                项目状态：<span className="fc-main">{this.state.ProDetail.ProjectMessage.status}</span><em></em>
                                {this.state.ProDetail.ProjectMessage.money ?
                                    <span>{this.state.ProDetail.ProjectMessage.money.key + ':'}<span className="fc-main">{this.state.ProDetail.ProjectMessage.money.value}</span>元<em></em></span> : ""
                                }
                                {this.state.ProDetail.ProjectMessage.time ?
                                    <span>{this.state.ProDetail.ProjectMessage.time.key + ':'}<span className="fc-main">{this.state.ProDetail.ProjectMessage.time.value}</span></span> : ""
                                }
                            </p>
                            {this.state.ProDetail.ProjectMessage.tips ?
                                <p className="fc-light">{this.state.ProDetail.ProjectMessage.tips}</p> : ""
                            }
                        </div> : ""
                    }
                    <div className="money">
                        <ul className="clearfix">
                            <li><p className="fc-main"><b className="fs42">{this.state.ProDetail.IncomeAmount}</b>元</p>
                                <p className="fc-light">预期收益</p></li>
                            <li><p><b>{this.state.ProDetail.PayAmount}</b>元</p>
                                <p className="fc-light">投资本金</p></li>
                        </ul>
                    </div>
                    <div className="info">
                        <ul className="clearfix">
                            <li><p>{this.state.ProDetail.Duration + "天"}</p>
                                <p className="fc-light">投资期限</p></li>
                            <li><p className="fc-main"><b>{this.state.ProDetail.InvestmentInterest}</b>%</p>
                                <p className="fc-light">年化利率</p></li>
                            <li><p>{this.state.ProDetail.ProjectAmount + "万"}</p>
                                <p className="fc-light">项目规模</p></li>
                        </ul>
                    </div>
                    <div className="pro-data">
                        <ul className="clearfix">
                            <li>项目起息日：{this.state.ProDetail.ValueBegin}</li>
                            <li>项目到期日：{this.state.ProDetail.RepayBegin}</li>
                            <li>还款方式：到期一次性还本付息</li>
                        </ul>
                    </div>
                    <div className="bank-back clearfix">
                        <label className="f-left">回款账户：</label>
                        <div className="input f-left">
                            <span className={"bank-logo "+this.state.ProDetail.CallbackAccount.BankLogo}></span>
                            <span>{this.state.ProDetail.CallbackAccount.AccountNo}</span>
                        </div>
                    </div>
                </div>
                <span className="angle angle-right-bottom"></span>
            </div>
        )
    }
});
module.exports = InvestDetail;